<template>

	<view>
		
		<view class="cateBox">
			<!-- 左侧列表 -->
			<scroll-view class="cate-left" scroll-y="true" :scroll-top="verticalNavTop" scroll-with-animation>
				<view class="cate-left-list" v-for="(item,index) in data" :key="index" @click="tapselect(index)">
					<!-- activeItem为选中状态 -->
					<view class="cate-left-item " :class="{activeItem:currentTab==index}">
						<label></label><text>{{item.typeName}}</text>
					</view>
				</view>
			</scroll-view>
			
			<!-- 右侧列表 -->
			<scroll-view class="cate-right" scroll-y="true" @scroll="mainScroll" :scroll-into-view="'cate-'+mainCur"
				scroll-with-animation>
				<!-- 数据为空 -->
				  <u-empty style="padding-top:100upx;" v-if="data.length<=0"></u-empty>
				<view v-for="(item,index) in data" :key="index" :id="'cate-'+index">
					<view class="cate-right-title">
						<view class="line"></view>
						<text style="font-weight: 700;color:rgb(209 124 47);font-size:33upx;">{{item.typeName}}</text>
					</view>
					<view class="cate-right-list">
						<view class="cate-right-item" v-for="(child,childindex) in item.sendLockItemInfoVoList" :key="childindex">
							<image :src="child.itemImage ? child.itemImage : '/static/images/anmo.png'" mode="" style="width: 200upx;height:200upx;border-radius: 20rpx;object-fit: cover"></image>
							<text style="margin-top:20upx;font-weight: 700;font-size:28upx;">{{child.typeName}}</text>
							<text style="color:red;font-weight: 700;font-size:30upx;margin:15upx 0;">￥{{child.money}}</text>
							<u-number-box v-model="child.num" @change="itemClick(child)" :min="0" :max="100" style="justify-content: center;"></u-number-box>
						</view>
					</view>
				</view>
				<view style="height: 50rpx;"></view>
			</scroll-view>
		</view>



	</view>

</template>

<script>
	export default {
		props: {

			data: {
				type: Array,
				default () {
					return []
				}
			}


		},
		data() {
			return {
				currentTab: 0,
				mainCur: 0,
				verticalNavTop: 0,
				list: [{}],

			}
		},
		mounted() {
			this.getHeight();
		},
		methods: {
			itemClick(item) {
		
						this.$emit('cateItemClick', item)
		
					},
			//点击左侧按钮
			tapselect(index) {
				this.currentTab = index;
				this.mainCur = index;
				this.verticalNavTop = (index - 1) * 50
			},
			//右侧滚动
			mainScroll(e) {
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
						this.currentTab = i;
						this.verticalNavTop = (i - 1) * 50
						return false
					}
				}
			},
			//获取右侧每项的top和bottom,里面需获取对应dom元素的高度，所以只能在mounted生命周期里调用
			getHeight() {
				var top = 0;
				var bottom = 0;
				var temp = 0;
				for (let i = 0; i < this.data.length; i++) {
					let view = uni.createSelectorQuery().select("#cate-" + i);
					view.fields({
						size: true
					}, data => {
						top = temp;
						bottom = temp + data.height;
						this.list[i] = {
							top: top,
							bottom: bottom
						};
						temp = bottom;
					}).exec();
				}

			}
		}


	}
</script>

<style>
	.cateBox {
		position: absolute;
		/* top: 90upx; */
		top: 0;
		bottom: 0;
		background: #fff;
		width: 100%;
		display: flex;
	}

	.cate-left {
		width: 200rpx;
		background: #f4f4f4;
		height: 100%;
	}

	.cate-left-item {
		background: #f4f4f4;
		height: 50px;
		display: flex;
		align-items: center;
	}

	.cate-left-item.activeItem {
		background: #fff;
	}

	.cate-left-item label {
		width: 5rpx;
		height: 100%;
		float: left;
		background: #f4f4f4;
	}

	.cate-left-item.activeItem label {
		background: #07c160;
	}

	.cate-left-item text {
		width: 196rpx;
		font-size: 28rpx;
		display: block;
		text-align: center;
	}

	/* 右侧*/
	.cate-right {
		flex: 1;
	}

	.cate-right-title {
		text-align: center;
		font-size: 28rpx;
		margin-top: 20rpx;
		line-height: 80rpx;
		position: relative;
	}

	.cate-right-title .line {
		position: absolute;
		height: 2rpx;
		width: 300rpx;
		background: orange;
		top: 39rpx;
		left: 50%;
		margin-left: -150rpx;
	}

	.cate-right-title text {
		background: #fff;
		padding: 0 10px;
		position: relative;
		color: #999;
	}

	.cate-right-list {
		height: auto;
		overflow: hidden;
	}

	.cate-right-item {
		width: 45%;
		float: left;
		margin-top: 20rpx;
		margin-left:20rpx;
	}

	.cate-right-item image {
		width: 160rpx;
		height: 160rpx;
		display: block;
		margin: 0 auto;
	}

	.cate-right-item text {
		display: block;
		text-align: center;
		font-size: 24rpx;
	}
</style>